<template>
    <!-- 公共组件样式抽取 -->
    <div class="common-card">
        <div style="display: flex;justify-content: space-between;">
            <div class="title">{{ title }}</div>
            <el-tooltip :content="content" effect="dark" placement="bottom">
                <svg-icon size="small" icon-class="question" />
            </el-tooltip>
        </div>

        <div class="value">{{ value }}</div>
        <div class="chart">
            <!-- 插槽1-->
            <slot></slot>
        </div>
        <div class="line" />
        <div class="total">
            <!-- 插槽2-->
            <slot name="footer"></slot>
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        title: String,
        value: String,
        content: String,
    }
}
</script>
  
<style scoped>
.title {
    font-size: 16px;
    color: #999;
}

.value {
    font-size: 25px;
    color: #000;
    margin-top: 5px;
    letter-spacing: 1px;
}

.chart {
    height: 30px;
}

.common-card {
    padding: 10px 10px;
    border: 1px solid #eee;
}

.line {
    margin: 10px 0;
    border-top: 1px solid #eee;
}

.total {
    font-size: 12px;
    color: #666;
}
</style>
  
<style lang="scss">
//强调样式
.emphasis {
    margin-left: 5px;
    color: #333;
    font-weight: 700;
}

//上三角
.increase {
    width: 0;
    height: 0;
    border-width: 3px;
    border-color: transparent transparent red transparent;
    border-style: solid;
    margin: 0 0 3px 5px;
}

//下三角
.decrease {
    width: 0;
    height: 0;
    border-width: 3px;
    border-color: green transparent transparent transparent;
    border-style: solid;
    margin: 3px 0 0 5px;
}
</style>
  
  